/*
 * 折线图demo
 * @Author: ljb
 * @Date: 2018-05-09 15:17:36
 * @Last Modified by: kanglin
 * @Last Modified time: 2018-08-29 16:16:00
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>

    @import '~src/assets/css/common.less';

    .line-chart {
        width: 100%;
        height: 8rem;
    }

</style>
<template>

	<div
		id="line_chart"
		ref="line_chart"
		class="line-chart" />
</template>

<script>

import echarts from 'echarts';

// @link http://mockjs.com/examples.html#DPD mockjs文档
import Mock from 'mockjs';

export default {
	name: 'LineChartDemo',
	data() {
		return {

			line_chart: null,

			mock_data: {},

		};
	},
	mounted() {
		this.line_chart = echarts.init(this.$refs.line_chart);

		this.initMockData();
	},
	methods: {

		/**
         * 生成mock数据
         * @return {undefined}
         */
		initMockData() {
			this.mock_data = Mock.mock({
				// 属性 time 的值是一个数组，其中含有 1 到 100 个元素
				'time|1-100': [{

					time: '@DATETIME("yyyy-MM-dd HH:mm:ss")',

					rate: '@natural(0, 100)',

				}],
			}).time;

			this.formatData();
		},

		/**
         * 设置echarts
         * @param  {Array} xAxis  {x轴}
         * @param  {Array} series {数据}
         * @return {undefined}
         */
		setEchartOption({ xAxis, series, dataZoom }) {
			const max_value = series.sort().reverse()[0];

			const option = {
				title: {
					text: '测试折线图',
					subtext: '数据来自mockJs',
					x: 'center',
				},
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						animation: false,
					},
				},
				legend: {
					data: ['测试value'],
					x: 'left',
				},
				axisPointer: {
					snap: true,
				},
				// toolbox: {
				//     feature: {
				//         dataZoom: {
				//             yAxisIndex: 'none'
				//         },
				//         restore: {},
				//         saveAsImage: {}
				//     }
				// },
				dataZoom: [
					// {
					//     show: true,
					//     realtime: true,
					//     start: 0,
					//     end: dataZoom,
					//     zoomLock: true,
					//     textStyle: false
					// },
					{ // 这个dataZoom组件，也控制x轴。
						type: 'inside', // 这个 dataZoom 组件是 inside 型 dataZoom 组件
						realtime: true,
						start: 0,
						end: dataZoom,
						zoomLock: true,
						textStyle: false,
					},
				],
				grid: [{
					left: 50,
					right: 50,
					height: '40%',
				}],
				xAxis: [
					{
						type: 'category',
						boundaryGap: true,
						axisLine: { onZero: true },
						data: xAxis,
						axisTick: {
							interval: 0,
						},
						axisLabel: {
							interval: 0,
							formatter(value) {
								const date = value.split(' ').shift();

								return date;
							},
							rotate: 45,
						},
					},
				],
				yAxis: [
					{
						show: false,
						name: '测试value',
						type: 'value',
						max: max_value + 10,
						splitLine: {
							show: false,
						},
					},
				],
				series: [
					{
						name: '测试value',
						type: 'line',
						symbolSize: 8,
						hoverAnimation: false,
						data: series,
					},
				],
			};

			this.line_chart.setOption(option);

			this.line_chart.on('click', (params) => {
				alert(`当前时间：${params.name}`);
			});
		},

		/**
         * 格式化数据成echart配置项所需数据
         * @return {undefined}
         */
		formatData() {
			const chart_option = {

				xAxis: [],

				series: [],

				dataZoom: 5,

			};

			const device_width = window.innerWidth;

			const data_length = this.mock_data.length;

			chart_option.dataZoom = (parseFloat((device_width / 70).toFixed(2)) * 100) / data_length; // 根据屏幕宽度计算显示的条目数

			this.mock_data.forEach((data) => {
				const { time } = data;
				const { rate } = data;

				chart_option.xAxis.push(time);

				chart_option.series.push(rate);
			});

			this.setEchartOption(chart_option);
		},

	},
};
</script>
